<template>
  <div class="storeTypeIndustry_module wfull">
    <el-cascader
      clearable
      class="wfull"
      v-model="localModelValue"
      :options="options"
      :props="cascaderProps"
      @change="handleChange"
      filterable
      :disabled="disabled"
      :placeholder="$t(placeholderKey)"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, PropType } from "vue";
import { CascaderProps } from "element-plus";
import { 
  IndustryDataType,
 } from "../../viewModel/cluInformation/addClueInformation";
import { getIndustry } from "../../service/clueInformation/clueInformation";
export default defineComponent({
  name: "storeTypeIndustryCascader",
  props: {
    cascaderProps: {
      type: Object as () => CascaderProps,
      default: () => {
        return {
          expandTrigger: "hover" as const,
          value: "industryId",
          label: "industryName",
        };
      },
    },
    // 新增：接收父组件传递的初始选中地址值
    modelValue: {
      type: Array as () => number[],
      default: () => [],
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },
    placeholderKey: {
      type: String,
      default: () => "clueInformation_Sector_placeholder",
    },
    serviceFn: {
      // 传递函数
      type: Function as PropType<() => Promise<any>>,
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      getIndustryData();
    });

    // 获取行业下拉数据
    const getIndustryData = () => {
      if (props.serviceFn) {
        props
          .serviceFn()
          .then((res) => {
            let data = res?.data;
            options.value = data.data as IndustryDataType;
            let label = getLabels(options.value, localModelValue.value, []);
            emit("getLabels", label);
          })
          .catch(() => {
            console.log("行业获取失败");
          });
      } else {
        getIndustry().then((res) => {
          let data = res?.data;
          options.value = data.data as IndustryDataType;
          let label = getLabels(options.value, localModelValue.value, []);
          emit("getLabels", label);
        });
      }
    };

    // 获取标签设置
    const getLabels = (
      options: IndustryDataType,
      selectedValues: number[],
      labels: string[]
    ) => {
      if (!selectedValues) {
        return labels;
      }
      for (let i = 0; i < options.length; i++) {
        if (selectedValues[0] === options[i].industryId) {
          labels.push(options[i].industryName);
          if (selectedValues.length > 1 && options[i].children) {
            getLabels(
              options[i].children as IndustryDataType,
              selectedValues.slice(1),
              labels
            );
          }
          break;
        }
      }
      return labels;
    };
    const options = ref<IndustryDataType>([]);
    const localModelValue = ref<number[]>(props.modelValue);
    const handleChange = (payload: number[]) => {
      localModelValue.value = payload;
      let labels = getLabels(options.value, payload, []);
      emit("getLabels", labels);
      emit("update:modelValue", payload);
    };

    watch(
      () => props.modelValue,
      (newVal) => {
        localModelValue.value = newVal;
        let label = getLabels(options.value, localModelValue.value, []);
        emit("getLabels", label);
      }
    );
    return {
      options,
      handleChange,
      localModelValue,
    };
  },
});
</script>
<style scoped></style>
